<!-- 试题管理首页-->
<template>
  <div class="app-container">
    <div class="wrapper">
      <ul class="top">
        <li class="search-li">
          <div class="icon"><input type="text" placeholder="题库名称" class="search" v-model="queryCourse">
            <i class="el-icon-search"></i>
          </div>
        </li>
        <li><el-button type="primary" @click="clickQuery">搜索题库</el-button></li>
      </ul>
      <!-- 题库卡片区域 -->
      <ul class="paper" v-loading="loading">
        <!-- 遍历题库 -->
        <li class="item" v-for="(item,index) in courseQuestions" :key="index">
            <h4>
    <router-link
      :to="`/question/list/index/${encodeURIComponent(item.course)}`"
      class="link-type"
    >{{ item.course }} 课程题库
              </router-link>
          </h4>
          <p class="name">题目数量:{{ item.judgeCount+item.choiceCount+item.fillCount }}</p>
          <div class="info">
            <i class="el-icon-loading"></i><span>判断题:{{item.judgeCount}}</span>
            <i class="iconfont icon-icon-time"></i><span >选择题:{{item.choiceCount}}</span>
            <i class="iconfont icon-fenshu"></i><span>填空题:{{item.fillCount}}</span>
          </div>
        </li>
      </ul>
      <div class="pagination">
     <pagination
      v-show="total>0"
      :total="total"
      :page-sizes="[6, 9, 12, 15]"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
      </div>
     
    </div>
  </div>
</template>

<script setup name="Question">
import { listCourseQuestion } from "@/api/module/question"

//查找题库
const queryCourse=ref('');

//请求数据
const queryParams = ref( {
    pageNum: 1,
    pageSize: 6,
    course:queryCourse.value
  })
  //返回数据
const total = ref(0)

const courseQuestions = ref([])
/** 查询课程题库列表 */
function getList() {
  listCourseQuestion(queryParams.value).then(response => {
    courseQuestions.value = response.rows
    total.value = response.total
  })
}

//点击查询
const clickQuery =() => { 
 queryParams.value.course = queryCourse.value
 getList()
 queryCourse.value = ''
}


getList()


</script>

<style lang="less" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}

.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

//题库卡片
//题库模块中的信息，每个图标与文字之间距离和图标颜色
.item .info i {
  margin-right: 5px;
  color: #208ddb;
}
//题库模块中的信息，文字之间距离
.item .info span {
  margin-right: 14px;
}
//题库卡片
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}


.paper * {
   list-style: none;
  margin: 20px 0;
  
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}

</style>